import LogsItem from './logsItem';
import './logs.css'
import Card from '../UI/card/Card';
import { useRef, useState } from 'react';

const Logs = (props) =>{
  // 过滤数据
  const [filterData, setFilterData] = useState(props.logsData)
  let seleRef = useRef()
  const seleChange = () => {
    let year = seleRef.current.value
    if(seleRef.current.value == '请选择') {
      setFilterData([...props.logsData])
      return false
    }
    setFilterData(() => {
      let filData = props.logsData.filter(item => item.date.substr(0,4) == year)
      return [...filData]
    })
    
  }
  let logoItems = filterData.map((item, index) => <LogsItem logIndex={index}
                                                                onDeleLog={()=>props.onDeleLog(index)}
                                                                key={item.id} 
                                                                date={item.date} 
                                                                desc={item.desc} 
                                                                time={item.time}></LogsItem>)
  return <Card>
    <select ref={seleRef} onChange={seleChange}>
      <option>请选择</option>
      <option>2022</option>
      <option>2021</option>
    </select>
    {logoItems.length!=0 ? logoItems : <h4 style={{padding:'10px'}}>没找到日志</h4>}
  </Card>
}

export default Logs